<!-- 监控总览-资产概况-2 -->
<script setup>
import { ref, computed } from 'vue'
import alarm_red from '@/assets/img/overview/alarm_red.png'
import alarm_ora from '@/assets/img/overview/alarm_ora.png'
import alarm_yellow from '@/assets/img/overview/alarm_yellow.png'
import alarm_blue from '@/assets/img/overview/alarm_blue.png'

// 设备品牌统计
const barYData = ref({
  name: ["Dell", "Cisco", "Huawei", "IBM", "Lenovo", "NetApp", 'HuaWei', 'IBM', '品牌2', 'HuaWei', 'IBM', '品牌2'],
  series: [2, 100, 1600, 1049, 1317, 6302, 800, 560, 800, 560, 800, 560]
})
const barYColor = ref(['rgba(107, 230, 193, 1)'])

const stackName = ref(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])
const stackData = ref([
  {
    name: 'Direct',
    data: [320, 302, 301, 334, 390, 330, 320]
  },
  {
    name: 'Mail Ad',
    data: [120, 132, 101, 134, 90, 230, 210]
  },
  {
    name: 'Affiliate Ad',
    data: [220, 182, 191, 234, 290, 330, 310]
  }
])

// 设备部件统计
const radarData = ref([300, 500, 600, 800, 400, 1000, 200, 300, 500, 600])
const radarName = ref(['CPU', '内存','物理磁盘','网卡','HBA卡','电源','风扇','PCIE','阵列卡','显卡',])

// 设备健康度
const healthName = ref('健康度');
const healthData = ref([
  { value: 108, name: '致命' },
  { value: 735, name: '重要' },
  { value: 580, name: '次要' },
  { value: 484, name: '警告' },
])

// 设备类型统计
const funnelData = ref([
  { value: 60, name: '设备1' },
  { value: 40, name: '设备2' },
  { value: 20, name: '设备3' },
  { value: 50, name: '设备4' },
  { value: 10, name: '设备5' },
  { value: 30, name: '设备6' },
  { value: 80, name: '设备7' },
  { value: 70, name: '设备8' }
])

// 设备运行趋势
const lineName = ref(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])
const lineData = ref([
  {
    name: '111',
    series: [120, 132, 101, 134, 90, 230, 210]
  },
  {
    name: '222',
    series: [220, 182, 191, 234, 290, 330, 310]
  },
  {
    name: '333',
    series: [150, 232, 201, 154, 190, 330, 410]
  },
  {
    name: '444',
    series: [170, 252, 221, 174, 210, 350, 430]
  },
])

const alarmIcon = [alarm_red, alarm_ora, alarm_yellow, alarm_blue]

</script>

<template>
  <div class="device">
    <!-- 设备类型统计\设备品牌统计 -->
    <div class="card-wrapper2">
      <card-module2 title="设备类型统计" width="49%" height="656px">
        <funnel width="100%" height="100%" :data="funnelData" />
      </card-module2>
      <card-module2 title="设备品牌统计" width="49%" height="656px">
        <bar-y width="100%" height="600px" :color="barYColor" :data="barYData" />
      </card-module2>
    </div>
    <!-- 设备部件统计\设备部件品牌统计  -->
    <div class="card-wrapper2">
      <card-module2 title="设备部件统计" width="49%" height="656px">
        <div class="flex w-full h-full">
            <radar :data="radarData" :name="radarName" width="100%" height="600px" />
        </div>
      </card-module2>
      <card-module2 title="设备部件品牌统计" width="49%" height="656px">
        <bary-stack  width="100%" height="600px" :name="stackName" :data="stackData" />
      </card-module2>
    </div>
    <!-- 设备健康度\设备运行趋势\活动告警列表 -->
    <div class="card-wrapper3">
      <card-module2 title="设备健康度" width="363px" height="300px">
        <div class="flex h-full health">
          <div class="w-2/3 h-full">
            <pieBorder width="100%" height="250px" :name="healthName" :data="healthData" />
          </div>
          <div class="w-1/3 h-full health-list">
            <div class="health-list-item" v-for="(item, index) in healthData" :key="index">
              <div class="item-icon">
                <img :src="alarmIcon[index]" alt="Image" />
              </div>
              <p class="name">{{ item.name }}</p>
              <p class="value">{{ item.value }}</p>
            </div>
          </div>
        </div>
      </card-module2>
      <card-module2 title="设备运行趋势" width="902px" height="300px">
        <div style="width: 100%; height: 250px;">
          <lineMultip width="100%" height="250px" :name="lineName" :data="lineData" />
        </div>
      </card-module2>
      <card-module2 title="活动告警列表" width="403px" height="300px">
        <div class="alarm-box">
          <alarm-list />
        </div>
      </card-module2>
    </div>
  </div>
</template>

<style scoped lang="stylus">
.device {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
}
.card-wrapper2 {
  margin: 20px 20px 0 0;
  display: flex;
  justify-content: space-between;
}
.card-wrapper3 {
  margin: 20px 2px 0 0;
  display: flex;
  justify-content: space-between;
}

/** 设备健康度 */
.health {
  .health-list {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 185px;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 350;
    .health-list-item {
      display: flex;
      justify-content: start;
      height: 25px;
      line-height: 25px;
      .item-icon {
        width: 25%;
        img {
          margin-top: 3px;
        }
      }
      .name {
        width: 35%;
        font-weight: 350;
      }
      .value {
        flex: 1;
        font-size: 18px;
        font-weight: 600;
        color: rgba(18, 18, 18, 1);
      }
    }
  }
}
/**告警列表 */
.alarm-box {
  padding: 18px 16px 16px 23px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
}
</style>